<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>ShoppingShow</title>

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
   <link href="<?php echo base_url();?>common/bootstrap.css" rel="stylesheet">
   <script type="text/javascript" src="<?php echo base_url();?>common/jquery-1.3.min.js" ></script>
   <script type="text/javascript" src="<?php echo base_url();?>common/ajax_check.js" ></script>
	<style type="text/css">
	      body {
	        padding-top: 60px;
	      }
	     
	     html, body {
        background-color: #FFFAF0;
     	 }
      	body {
        	padding-top: 50px; /* 40px to make the container go all the way to the bottom of the topbar */
     	 }
      	.container > footer p {
        text-align: center; /* center align it with the container */
     	 }
      	.container {
         width: 1100px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
     	 }
     	 .article{
     	 	border-width:1px;
     	 	border:#FFE4E1;
     	 	
     	 	padding-top:3px; 
			padding-bottom:5%;
     	 	
     	 }
     	 .article a img.thumbnail{
			max-width:300px;
			max-height:500px;
	
			}

			.article p{
				text-align:right;
			}
			
			.img{
				text-align:center;
			}
	</style>
	
<script type="text/javascript">

function LTrim(str){
	var whitespace = new String(" \t\n\r");
	var s = new String(str); 
	if (whitespace.indexOf(s.charAt(0)) != -1){
		var j=0, i = s.length;
		while (j < i && whitespace.indexOf(s.charAt(j)) != -1){
	j++;
	}
	s = s.substring(j,i);
}
return s;
}

function checkInput(){
	var userId = document.getElementById("user_id").value;	    
	var displayName = document.getElementById("user_name").value;	    
	var pwd = document.getElementById("password").value;	  		
	var pwdAgain = document.getElementById("pwdAgain").value;

	if(LTrim(userId).length == 0)
	{

		alert("ユーザーIDを入力してください!");
		
		$("#user_id").focus();
		return false;
	}

	if(LTrim(displayName).length == 0)
	{
		alert("ニックネームを入力してください!");
		$("#user_name").focus();
		return false;
	}
	if(LTrim(pwd).length==0)
	{
		alert("パスワードを入力してください!");
		$("#password").focus();
		return false;
	}	
	if(LTrim(pwdAgain).length == 0)
	{
		alert("パスワード再入力を入力してください!");
		$("#pwdAgain").focus();
		return false;
	}	
		var isNumber =/^[0-9]\d*$/;
		var isAlphabet=/^[a-zA-Z]\D*$/;
		
		if(isNumber.test(userId)){
			alert("ユーザーIDの構成は、アルファベットが必須です！");
			$("#user_id").focus();
			return false;
		}
	
		if(pwd.length < 7){
			alert("パスワードの長さは７より大きくしてください！");
			$("#password").focus();
			return false;
		}
		
		if(isNumber.test(pwd)||isAlphabet.test(pwd)){
			alert("パスワードの構成は数字とアルファベットが必須です！");
			$("#password").focus();
			return false;
		}
		
		if(pwdAgain.length!=pwd.length||pwd!=pwdAgain){
			alert("パスワードの二回の入力が違います！");
			$("#pwdAgain").focus();
			return false;
		}
	
	return true;
}

</script>
</head>
<body>
<div class="topbar">
      <div class="fill">
        <div class="container" >
          <a class="brand" href="<?php echo base_url();?>">shoppingShow</a>
          <ul class="nav">
          <li><a href="<?php echo site_url("items/mainShow");?>">Back</a></li>
          </ul>
        </div>
    </div>
</div>

<div class="container">	
	<form class="pull-center" action="register" method="post" onsubmit="return checkInput();">
	<div>
		<label>New Id:</label> <input class="input-medium" type="text" id="user_id"
			name="user_id" onchange="user_check();"/><font
			color="Red">*</font>
		<img id = "img" src = "" />
	</div>
	
	<div><label>Nickname:</label> <input class="input-medium" type="text" id="user_name"
		name="user_name" /><font color="Red">*</font></div>
	<div><label>Create a password:</label> <input class="input-medium" type="password" id="password"
		name="password" /><font color="Red">*</font></div>
	<div><label>Password again:</label> <input class="input-medium" type="password" id="pwdAgain"
		name="pwdAgain" /><font color="Red">*</font></div>
	<div>
		<button class="btn" type="submit">Submit</button>
	</div>
	</form>
	<br />
</div>
</body>
</html>
